<template>
  <div class="BsHomePage">
    <div class="title">
      Kpods的秘密基地
    </div>
    <div class="options">
      <ul>
        <li @click="toUrl('/BsHome/ArticleRelease')">文章发布</li>
        <li @click="toUrl('/BsHome/ArticleManagement')">文章管理</li>
        <li @click="toUrl('/BsHome/CommentManagement')">评论管理</li>
        <li @click="toUrl('/BsHome/TimeRecord')">时间记录</li>
      </ul>
    </div>
  </div>
  <!-- 文章管理，可以删除文章或者修改文章相关信息 -->
  <!-- 评论管理，回复评论 -->
  <!-- 时间线内容发表模块 -->
  <!-- 文章发布模块 -->
</template>

<script>
export default {
  methods: {
    toUrl(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="less" scoped>
.BsHomePage {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/BsHomePage.png");
  background-size: 100% 100%;
  .title {
    width: 400px;
    height: 50px;
    color: #fff;
    position: absolute;
    left: 33%;
    top: 18%;
    transform: rotate(-9deg);
    font-size: 35px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 2px;
  }
  .options {
    position: absolute;
    top: 35%;
    left: 34.5%;
    transform: rotate(-9deg);
    ul {
      width: 500px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      line-height: 120px;
      li {
        width: 180px;
        height: 120px;
        color: #fff;
        border: 2px dashed #fff;
        margin: 20px;
        font-size: 22px;
        cursor: pointer;
        &:nth-child(1):hover {
          background-color: rgb(113, 255, 224);
          color: #da8a4c;
        }
        &:nth-child(2):hover {
          background-color: rgb(255, 243, 135);
          color: #da8a4c;
        }
        &:nth-child(3):hover {
          background-color: rgb(172, 136, 255);
          color: #da8a4c;
        }
        &:nth-child(4):hover {
          background-color: rgb(255, 158, 211);
          color: #da8a4c;
        }
      }
    }
  }
}
</style>
